<template>
  <!-- <h2>{{ message1 }}</h2>
  <h3>{{ message2 }}</h3>
  <h4>没有通过解构获得的 count：{{ mainStore.count }}</h4>
  <h4>通过解构获得的 count：{{ count }}</h4>

  <button @click="getStore">按钮</button>
  <button @click="mainStore.addCount">模板调用 actions 的 addCount 方法</button>
  <button @click="addCount">自定义方法调用 actions 的 addCount 方法</button>
  <button @click="resetCount">重置 state</button>
  <br> -->
  <!-- <h4>{{ age }}</h4>
  <button @click="projectStore.addAge">模板跨容器调用</button>
  <button @click="addAge">自定义方法跨容器调用</button> -->

  <!-- 后面相同的调用，都是基于第一次计算的值 -->
  <p>{{ mainStore.comp(2) }}</p>
  <p>{{ mainStore.comp(3) }}</p>
  <p>{{ mainStore.comp(4) }}</p>
</template>

<script setup lang="ts">
// 导入 pinia 中的 storeToRefs 方法
import { storeToRefs } from 'pinia';
// 导入 pinia 实例
import { useMainStore, useProjectStore } from '../store/index'

// 实例化容器
const mainStore = useMainStore()
const projectStore = useProjectStore()

// 体验通过解构获取 pinia 的 state，解构出来的值不是响应式的
// 将 pinia 实例对象通过 storeToRefs 包裹起来的时候，里面的值就是响应式的了
const { message1, message2, count, number } = storeToRefs(mainStore)
const { username, age } = storeToRefs(projectStore)

// 按钮点击事件
const getStore = () => {
  console.log(message1 + " " + message2 + " " + count);
  mainStore.count++
}

// 自定义的 count 加法方法
const addCount = () => {
  // mainStore.addCount()

  // 1、$patch 方法，可以直接修改 state 中的值
  // mainStore.$patch({
  //   message1: '你好',
  //   message2: '菠萝',
  //   count: 66,
  // })

  // 2、$patch 方法，通过分组改变 state 中的值
  mainStore.$patch(state => {
    state.message1 += ' Hello'
    state.message2 += ' Pinia'
    state.count++
  })
}

// 重置 count 数据的方法
const resetCount = () => {
  mainStore.$reset()
}

// 自定义的 age 加法方法
const addAge = () => {
  projectStore.age += mainStore.number
}
</script>

<style scoped></style>
